<template>
  <div class="tab">
    <div class="tab-index">
      <!-- 骨架屏 -->
      <template v-if="loading">
        <div
            v-for="n in 40"
            :key="n"
            class="item skeleton"
        ></div>
      </template>

      <!-- 正常数据 -->
      <template v-else>
        <div :class="index === indexTab ? 'active': 'item'"
             @click="indexTab = index"
             v-for="(item,index) in classTabs" :key="index">
          {{ textBeyond(item, 4) }}
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import {videoClass} from '@/api/index'
import {onMounted, ref} from 'vue'
import {textBeyond} from '@/utils'

const classTabs = ref<string[]>([])
const loading = ref<boolean>(true)
const indexTab = ref<number>()

onMounted(async () => {
  const res = await videoClass()
  classTabs.value = res.data
  loading.value = false
})
</script>

<style scoped lang="scss">
.tab {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .tab-index {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    padding-top: 15px;
    //border: 1px solid red;
    overflow: scroll;

    .item, .active {
      width: calc(100% / 18);
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px 3px;
      text-overflow: ellipsis;
      cursor: pointer;
      background: rgb(246, 247, 248);
      border-radius: 5px;
      transition: background 0.2s;
      //border: 1px solid red;

      &:hover {
        background: rgb(227, 229, 231);
      }
    }

    .active {
      background: rgb(227, 229, 231);
    }

    /* 骨架屏样式 */
    .skeleton {
      background: #e2e2e2;
      animation: shine 1.2s infinite linear;
    }

    @keyframes shine {
      0% {
        background-color: #e2e2e2;
      }
      50% {
        background-color: #f0f0f0;
      }
      100% {
        background-color: #e2e2e2;
      }
    }
  }
}
</style>
